@use '@scss/common.scss' as *;

.sidebarNav {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--sticky-sidebar-top);

  @include small-break {
    margin-bottom: 1rem;
    flex-direction: row;
  }
}

.sidebarNavItem {
  margin: 0;
  color: var(--theme-elevation-600);
  margin-right: 0.75rem;
  margin-bottom: 0.35rem;

  &.lastItem {
    margin-right: 0;
    margin-bottom: 0;
  }

  &.active {
    a,
    a:hover {
      color: var(--theme-text);
      font-weight: bold;
    }
  }

  a {
    &:hover {
      color: var(--theme-text);
    }

    &:focus {
      opacity: 1;
    }

    @include underline-on-focus;
  }
}
